<script lang="ts">
import { defineComponent, ref, watch } from "vue"
import { Erc20Module } from "@/store/modules/erc20";
import { UserModule } from "@/store/modules/user";
import { IDOModule } from "@/store/modules/IDO";
import { useI18n } from "vue-i18n";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { USDT_TOKEN, IDO_CONTRACT } from "@/contract";
import { BigNumber } from "bignumber.js";
import { toWei, fromWei, formatAddress } from "@/utils/format";
import { lpMineModule } from "@/store/modules/lpMine";



export default defineComponent({
    setup() {
        const { t } = useI18n();
        const pageLoading = ref(true);
        const amount = ref(2000)
        const amountList = ref([2000, 10000])
        const loading = ref(false)
        const loading2 = ref(false)
        const USDT = ref()
        const userInfo = ref({})
        const contractInfo = ref({})
        const nodeNum = ref(0)
        const getPrice = ref(0)
        const sendIdoUSDT = async () => {
            loading.value = true;
            try {
                await UserModule.verifyToken();
                if (USDT.value < Number(amount.value)) {
                    showToast(t("layout.theBalanceDOGEIsOnly") + USDT.value);
                    loading.value = false;
                    return;
                }
                const allowance = await Erc20Module.allowance({
                    owner: USDT_TOKEN,
                    spender: IDO_CONTRACT,
                });
                if (new BigNumber(allowance).lte(toWei(amount.value))) {
                    if (allowance !== toWei(amount.value))
                        await Erc20Module.approve({
                            owner: USDT_TOKEN,
                            spender: IDO_CONTRACT,
                            appValue: amount.value,
                        });
                }
                await IDOModule.idoUSDT(amount.value);
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading.value = false;
        };
        const sendGetERC20 = async () => {
            loading2.value = true;
            try {
                await IDOModule.getERC20();
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading2.value = false;
        };
        const loadData = async () => {
            await IDOModule.userInfo().then(res => {
                userInfo.value = res
            })
            await IDOModule.contractInfo().then(res => {
                contractInfo.value = res
            })
            await lpMineModule.nodeNum().then(res => {
                nodeNum.value = res
            })
            let usdt: string = await Erc20Module.balanceOf({
                owner: USDT_TOKEN,
            });
            lpMineModule.getPrice().then(res => {
                getPrice.value = res
            })
            USDT.value = fromWei(usdt);
            pageLoading.value = false
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            amount,
            amountList,
            pageLoading,
            loading,
            userInfo,
            contractInfo,
            loading2,
            nodeNum,
            getPrice,
            sendIdoUSDT,
            sendGetERC20,
            fromWei
        }
    }
}) 
</script>

<template>
    <div class="page">
        <div class="total">
            <div class="row">
                <div class="cell">
                    <div class="label"><img src="@/assets/image/image5.png" alt="" srcset="">{{
                        $t('layout.Participatingaddress') }}</div>
                    <div class="value">{{ (Number(contractInfo[1]) + Number(nodeNum)) || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label"><img src="@/assets/image/image6.png" alt="" srcset="">{{ $t('layout.PrivateEquity')
                    }}USDT</div>
                    <div class="value">{{ fromWei(contractInfo[0]) }}</div>
                </div>
            </div>
        </div>
        <div class="border">
            <div class="form">
                <div class="row">
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/image7.png" alt="" srcset="">{{
                            $t('layout.privateplacementprice') }}</div>
                        <div class="value">{{ fromWei(getPrice) }}</div>
                    </div>
                </div>
                <ul>
                    <li v-for="item in amountList" :class="{ on: item == amount }" @click="amount = item" :key="item">
                        {{ item }}
                    </li>
                </ul>
                <van-button type="primary" :disabled="true" v-if="Number(userInfo[0])">
                    {{ fromWei(userInfo[2])
                        == 4000 ? $t('layout.Youarealreadyacommunitynode') : $t('layout.Youarealreadyasupernode') }}
                </van-button>
                <van-button type="primary" @click="sendIdoUSDT" :disabled="pageLoading" :loading="loading" v-else>{{
                    $t('layout.Participatenow') }}</van-button>
                <div class="txt">{{ $t('layout.AsingleprivatesaleofUSDTwillgetdoublethetokens') }}</div>
            </div>
        </div>
        <div class="border">
            <div class="form">
                <div class="row">
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/image8.png" alt="" srcset="">{{
                            $t('layout.Myprivateplacement') }}</div>
                        <div class="value">{{ fromWei(userInfo[2]) }}</div>
                    </div>
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/image9.png" alt="" srcset="">{{
                            $t('layout.Tobecollected') }}</div>
                        <div class="value">{{ fromWei(userInfo[3]) }}</div>
                    </div>
                </div>
                <van-button type="primary" :disabled="!fromWei(userInfo[3])" :loading="loading2" @click="sendGetERC20">{{
                    $t('layout.receive')
                }}</van-button>
                <div class="txt">{{ $t('layout.daysrelease') }}</div>
            </div>
        </div>

    </div>
    <referrer @load="sendIdoUSDT" />
</template>

<style lang="less" scoped>
.page {
    padding: 15px;

    .total {
        margin-bottom: 18px;

        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .cell {
                flex: 1;
                text-align: center;

                .label {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: rgba(255, 219, 196, 1);

                    img {
                        margin-right: 9px;
                        height: 15px;
                    }
                }

                .value {
                    margin-top: 10px;
                    font-size: 25px;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 25px;
                }

            }
        }
    }

    .border {
        margin-top: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;

    }

    .form {
        padding: 20px 15px;
        background: linear-gradient(90deg, #01012B 0%, #32437B 100%);
        border-radius: 8px;

        .row {
            .cell {
                margin-bottom: 12px;
                padding: 13px 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);



                .label {
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: 9px;
                        height: 20px;
                    }
                }

                .value {
                    font-size: 15px;
                    font-weight: bold;
                    color: #FFBD91;
                }
            }
        }

        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;

            li {
                width: 151px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);

                &.on {
                    background: rgba(255, 219, 196, 0.05);
                    border: 1px solid #FFDBC4;
                }
            }
        }

        .van-button {
            margin-top: 12px;
        }

        .txt {
            margin-top: 12px;
            font-size: 12px;
            font-weight: 400;
            color: #FFDBC4;
            text-align: center;
            opacity: 0.5;
        }
    }
}
</style>
